@charset 'utf-8';
body{
	background-color: #151515;
}

/* 轮播图开始 */
.carousel{
	width: 352px;
	height: 220px;
	border:1px solid #020;
	position:relative;
	overflow: hidden;
	margin: 20px auto;
	input{
		width: 25px;
		height: 25px;
		position: absolute;
		z-index: 3;
		opacity:0;
	}
	input:nth-of-type(1){
		right: 75px;
		bottom: 0;
		&:checked~.wrap span:nth-child(1){
			background:#333;
			color: #fff;
		}
		&:checked~.pic{
			left: 0;	
			animation:lunbo1 5s linear 2s infinite;
		}
	}
	input:nth-of-type(2){
		right: 50px;
		bottom: 0;
		&:checked~.wrap span:nth-child(2){
			background:#333;
			color: #fff;
		}
		&:checked~.pic{
			left: -352px;	
			animation:lunbo2 5s linear 2s infinite;
		}
	}
	input:nth-of-type(3){
		right: 25px;
		bottom: 0;
		&:checked~.wrap span:nth-child(3){
			background:#333;
			color: #fff;
		}
		&:checked~.pic{
			left: -704px;	
			animation:lunbo3 5s linear 2s infinite;
		}
	}
	input:nth-of-type(4){
		right: 0;
		bottom: 0;
		&:checked~.wrap span:nth-child(4){
			background:#333;
			color: #fff;
		}
		&:checked~.pic{
			left: -1056px;	
			animation:lunbo4 5s linear 2s infinite;
		}
	}

	.wrap{
		position: absolute;
		width: 100px;
		height: 25px;
		right: 0;
		bottom: 0;
		display: flex;
		z-index: 2;
		span{
			flex-grow:1;
			text-align: center;
			background:#ccc;
		}
	}
	.pic{
		width: 352px * 5;
		height: 220px;
		position: absolute;
		top: 0;
		left: 0;
		animation:lunbo 5s linear infinite;
		div{
			float:left;
			img{
				display: block;
			}
		}
	}
}
@keyframes lunbo{
	0%{transform: translate(-1408px,0)}
	100%{transform: translate(0,0)}
}
@keyframes lunbo1{
	0%{transform: translate(-80%,0)}
	100%{transform: translate(0,0)}
}
@keyframes lunbo2{
	0%{transform: translate(-60%,0)}
	100%{transform: translate(20%,0)}
}
@keyframes lunbo3{
	0%{transform: translate(-40%,0)}
	100%{transform: translate(40%,0)}
}
@keyframes lunbo4{
	0%{transform: translate(-20%,0)}
	100%{transform: translate(60%,0)}
}
/* 轮播图结束 */
/* 立方体开始 */
.container1{
	position: relative;
	width: 420px;
	height: 360px;
	margin: 20px auto 0;
	.scene{
		position: absolute;
		top: 0;left: 0;
		width: 100%;
		height: 100%;
		perspective:400px;
		perspective-origin: 50% 50%;
		animation:example 9s linear infinite;
		.sides{
			position: absolute;
			top: 0;left: 0;
			width: 100%;
			height: 100%;
			transform-style:preserve-3d;
			display: flex;
			flex-wrap:wrap;
			div{
				width: 120px;
				height: 100px;
				margin: 10px;
				background:#6988be;
				&:first-child,&:last-child{
					margin: 10px 150px;
				}
			}
			div:first-child{
				transform:rotateX(-45deg);
			}
			div:nth-child(2){
				transform: rotateY(45deg);
			}
			div:nth-child(4){
				transform: rotateY(-45deg);
			}
			div:last-child{
				transform: rotateX(45deg);
			}
		}
	}
}
@keyframes example{
	0%{perspective:400px;}
	12.5%{perspective:200px;}
	25%{perspective:200px;}
	37.5%{perspective:400px;}
	50%{perspective:400px;}
	62.5%{perspective:1200px;}
	75%{perspective:1200px;}
	87.5%{perspective:400px;}
	100%{perspective:400px;}
}

.container2{
	position: relative;
	width: 420px;
	height: 360px;
	margin: 20px auto 0;
	.scene{
		position: absolute;
		top: 0;left: 0;
		width: 100%;
		height: 100%;
		perspective: 400px;
		perspective-origin: 50% 50%;
		animation: example-scene 20s linear infinite;
		.sides{
			position: absolute;
			top: 0;left: 0;
			width: 100%;
			height: 100%;
			transform-style: preserve-3d;
			display: flex;
			flex-wrap: wrap;
			div{
				width: 120px;
				height: 100px;
				margin: 10px;
				background:#5a5d1c;
				&:first-child{
					margin: 10px 150px;
					transform: rotateX(-30deg);
				}
				&:nth-child(2){
					transform: rotateY(30deg);
				}
				&:nth-child(4){
					transform: rotateY(-30deg);
				}
				&:last-child{
					margin: 10px 150px;
					transform: rotateX(30deg);
				}
			}
		}
	}
	.eye{
		width: 64px;
		height: 40px;
		position: absolute;
		top: 50%;left: 50%;
		margin: -22px 0 0 -32px;
		animation: example-eye 20s linear infinite;
	}
}
@keyframes example-scene{
	0%{  perspective-origin: 50% 50%;}
	  10%{perspective-origin:0 50%;}
	  20%{perspective-origin: 0 0;}
	  30%{perspective-origin: 50% 0;}
	  40%{perspective-origin: 100% 0;}
	  50%{perspective-origin: 100% 50%;}
	  60%{perspective-origin: 100% 100%;}
	  70%{perspective-origin: 50% 100%;}
	  80%{perspective-origin: 0 100%;}
	  90%{perspective-origin: 0 50%;}
	  100%{perspective-origin: 50% 50%;}
}
@keyframes example-eye{
	0%{left: 50%; top: 50%;}
	10%{left: 0; top: 50%;}
	20%{left: 0; top: 0;}
	40%{left: 100%; top: 0;}
	60%{left: 100%; top: 100%;}
	80%{left: 0; top: 100%;}
	90%{left: 0; top: 50%;}
	100%{left: 50%; top: 50%;}
}



.container3{
	width: 300px;
	height: 300px;
	margin: 75px auto 10px;
	perspective: 1200px;
	.cube{
		position: relative;
		width: 300px;
		height: 300px;
		transform-style: preserve-3d;
		transform: translateZ(-150px) rotateX(0deg);
		animation: example1 15s linear infinite;
		.side{
			position: absolute;
			width: 300px;
			height: 300px;
			background-color: #999;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding: 120px 0;
			font: 50px/1 'Trebuchet MS',sans-srif;
			color: #fff;
			text-transform: uppercase;
			text-align: center;
			&::before{
			content: '';
			position: absolute;
			top: 0;left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.15);
			}
			span{
				position: relative;
				display: block;
			}
			.guides{
				position: absolute;
				top: 0;
				left: 50px;
				width: 200px;
				height: 100%;
				border-style: dotted;
				border-width: 0 1px;
				color: rgba(255,255,255,0.6);
			}
		}
		.back{
			background: url(../img/1.jpg) no-repeat;
			background-size: 100% 100%;
			transform: translateZ(-150px) rotateX(180deg);
			span{
				animation: back 15s linear infinite;
			}
		}
		.top{
			background: url(../img/3.jpg) no-repeat;
			background-size: 100% 100%;
			transform: translateY(-150px) rotateX(90deg);
			span{
				animation: top 15s linear infinite;
			}
		}
		.bottom{
			background: url(../img/4.jpg) no-repeat;
			background-size: 100% 100%;
			transform: translateY(150px) rotateX(270deg);
			span{
				animation: bottom 15s linear infinite;
			}
		}
		.front{
			background: url(../img/2.jpg) no-repeat;
			background-size: 100% 100%;
			transform: translateZ(150px);
			span{
				animation: front 15s linear infinite;
			}
		}

	}
}
@keyframes example1{
	0%{transform: translateZ(-150px) rotateX(0deg)}
	15%{transform: translateZ(-150px) rotateX(90deg)}
	25%{transform: translateZ(-150px) rotateX(90deg)}
	40%{transform: translateZ(-150px) rotateX(180deg)}
	50%{transform: translateZ(-150px) rotateX(180deg)}
	65%{transform: translateZ(-150px) rotateX(270deg)}
	75%{transform: translateZ(-150px) rotateX(270deg)}
	90%{transform: translateZ(-150px) rotateX(360deg)}
	100%{transform: translateZ(-150px) rotateX(360deg)}
}
@keyframes front{
	0%{transform: translateY(0px);}
	15%{transform: translateY(-100px);}
	25%{transform: translateY(-100px);}
	40%{transform: translateY(0px);}
	50%{transform: translateY(0px);}
	65%{transform: translateY(100px);}
	75%{transform: translateY(100px);}
	90%{transform: translateY(0px);}
	100%{transform: translateY(0px);}
}
@keyframes bottom{
	0%{transform: translateY(100px);}
	15%{transform: translateY(0px);}
	25%{transform: translateY(0px);}
	40%{transform: translateY(-100px);}
	50%{transform: translateY(-100px);}
	65%{transform: translateY(0px);}
	75%{transform: translateY(0px);}
	90%{transform: translateY(100px);}
	100%{transform: translateY(100px);}
}
@keyframes top{
	0%{transform: translateY(-100px);}
	15%{transform: translateY(0px);}
	25%{transform: translateY(0px);}
	40%{transform: translateY(100px);}
	50%{transform: translateY(100px);}
	65%{transform: translateY(0px);}
	75%{transform: translateY(0px);}
	90%{transform: translateY(-100px);}
	100%{transform: translateY(-100px);}
}
@keyframes back{
	0%{transform: translateY(0px);}
	15%{transform: translateY(100px);}
	25%{transform: translateY(100px);}
	40%{transform: translateY(0px);}
	50%{transform: translateY(0px);}
	65%{transform: translateY(-100px);}
	75%{transform: translateY(-100px);}
	90%{transform: translateY(0px);}
	100%{transform: translateY(0px);}
}
/* 立方体结束 */
/* 温度计开始 */
.wrapper{
	width: 300px;
	height: 30px;
	background: #2c2c2c;
	margin: 150px auto;
	position: relative;
	top: 130px;
	border-radius: 30px;
	transform: rotate(-90deg) scale(0.85);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.1),
							inset 0 -3px 2px rgba(0,0,0,0.12),
							0 5px 5px rgba(0,0,0,0.4),
							0 0 5px rgba(0,0,0,0.4),
							inset 0 -15px 10px rgba(0,0,0,0.25),
							0 0 100px 50px #252525;
	&:before{
		content: '';
		position: absolute;
		top: 50%;left: -10px;
		background: inherit;
		width: 45px;
		height: 45px;
		border-radius:50%;
		margin-top: -22px;
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.1),
								inset 0 -3px 2px rgba(0,0,0,0.12),
								0 5px 5px rgba(0,0,0,0.4),
								0 0 5px rgba(0,0,0,0.4),
								inset 0 -15px 10px rgba(0,0,0,0.25);
	}
	&:after{
		content: '';
		width: 10px;
		height: 100%;
		background: #2c2c2c;
		position: absolute;
		top: 0;
		left: 28px;
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.1),
								inset 0 -3px 2px rgba(0,0,0,0.3),
								0 5px 2px rgba(0,0,0,0.2),
								inset 0 -15px 0px rgba(0,0,0,0.25);
	}
	.loader{
		width: 95%;
		height: 50%;
		position: absolute;
		left: 0;top: 50%;
		margin-top: -8px;
		background: #404040;
		border-radius: inherit;
		z-index: 100;
		box-shadow: inset 0 0 7px rgba(0,0,0,0.4),
								inset 0 3px 3px rgba(0,0,0,0.5),
								inset 0 -5px 5px rgba(0,0,0,0.4),
								0 1px 0 rgba(255,255,255,0.1);
	}
	.inner{
		width: 0%;
		height: 100%;
		background: #2b8095;
		background: linear-gradient(to right,#237686, #34476f, #5b426c, #965666, #ba835c, #d0c746);
		border-radius: inherit;
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.3),
								inset 0 8px 1px rgba(255,255,255,0.1),
								inset 0 -2px 1px rgba(255,255,255,0.1);
		animation: loader 5s ease-out infinite;
		&:after{
			content: '';
			position: absolute;
			top: 50%;
			left: -3px;
			margin-top: -15px;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background: #2b8095;
			background: linear-gradient(#63b5c0,#146a77);
			box-shadow: inset 0 2px 3px rgba(255,255,255,0.2),
									inset 0 -4px 2px rgba(255,255,255,0.1);
		}
		&:before{
			content: '';
			position: absolute;
			top: 0;left: 25px;
			height: 100%;
			width: 20px;
			background: linear-gradient(to right, #2b8095, rgba(64,64,64,0));
			z-index: 200;
		}
	}
}
@keyframes loader{
	100%{width: 100%;}
}
/* 温度计结束 */